<template>
  <div class="gdap-payment">
    <el-button type="success" round icon="el-icon-back" @click="gohome">返回首页</el-button>
    <p
      style="  font-family:SiYuanBold;color:rgb(207, 139, 50);font-size:2em;text-align: center;"
    >支付购买</p>
    <!-- <p style="color: rgb(187, 187, 187); min-width: 10px; min-height: 10px;font-family: Oswald;ont-size: 12px;text-align: center;">PAYMENT FOR PURCHASE</p> -->
    <!-- <el-row style="text-align:center;margin:10vh">
            <el-col :span="8">
            <div class="a" style="margin-left:50%">
              <img src="../../assets/t05.png">
                 <div>
                   <p style="color: rgb(85, 85, 85);line-height: 2em;font-size: 24px;margin-bottom: 0px;font-weight:bold">购买 3次</p>
                   <p style="line-height: 2em; color: rgb(153, 153, 153);margin-bottom: 0px;">推荐服务</p>
                    <p style="line-height: 2em; color: rgb(153, 153, 153);margin-bottom: 0px;">剩余0次</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
               <div class="a">
                 <img src="../../assets/t06.png">
                 <div>
                   <p style="color: rgb(85, 85, 85);line-height: 2em;font-size: 24px;margin-bottom: 0px;font-weight:bold">购买 4次</p>
                   <p style="line-height: 2em; color: rgb(153, 153, 153);margin-bottom: 0px;">预测服务</p>
                    <p style="line-height: 2em; color: rgb(153, 153, 153);margin-bottom: 0px;">剩余0次</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
               <div class="a" style="margin-left:0">
                 <el-badge :value="userChoose.length" class="item">
              <img src="../../assets/t07.png">
                 </el-badge>
                 <div>
                   <el-button class="hh" type="success" @click="showGoods" style="margin-top:3vh">立即购买</el-button>
                   <p style="line-height: 2em; color: rgb(153, 153, 153);margin-bottom: 0px;">购买服务,尽享专业化指导和推荐</p>
                </div>
              </div>
            </el-col>
    </el-row>-->

    <!-- <el-row style="text-align:center">
      <el-col :span="8">
        <div style="width:10em;background-color:#D84315;margin: 0 auto;color:white;text-align: left;">
          <img src="../../assets/t03.png" alt="" style="width: 3em;margin: 0.5em;">
          <div style="display:inline;float: right;margin: 0.5em;">
            <span>购买 3次</span>
            <div style="text-align:center">推荐服务</div>
          </div>
        </div>
        <div style="width: 10em;text-align:left;
    margin: 0 auto;border: 1px solid white;padding: 1px 0;background-color: #E37B5B;color:white">
          <span style="margin-left:0.5em">剩余 0次</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div style="width:10em;background-color:#006DCC;margin: 0 auto;color:white;text-align: left;">
          <img src="../../assets/t04.png" alt="" style="width: 3em;margin: 0.5em;">
          <div style="display:inline;float: right;margin: 0.5em;">
            <span>购买 4次</span>
            <div style="text-align:center">预测服务</div>
          </div>
        </div>
        <div style="width: 10em;text-align:left;
    margin: 0 auto;border: 1px solid white;padding: 1px 0;background-color: #4C98DB;color:white">
          <span style="margin-left:0.5em">剩余 0次</span>
        </div>
      </el-col>
      <el-col :span="8">
        <div>
          <el-badge :value="userChoose.length" class="item">
            <img src="../../assets/gouwuche.png" alt="" style="width:3em">
          </el-badge>
        </div>
        <div>
          <el-button type="success" round size="small" @click="showGoods">立即购买</el-button>
        </div>
        <div>
          <p style="font-size: 12px;
    color: grey;
    margin: 0;">购买服务,尽享专业化指导和推荐</p>
        </div>

      </el-col>
    </el-row>-->
    <!-- <div style="width:664.38px;height:170px;">
            <p class="b">PAYMENT<br>FOR PURCHASE</p>
    </div>-->
    <div>
      <el-row style="text-align:center;margin:5%">
        <el-col :span="6" style="margin-left:20%">
          <el-checkbox-group v-model="userChoose">
            <el-checkbox
              v-for="item in baseGoods"
              :label="item"
              :key="item.goodsId"
              @change="fnSelected(item)"
              class="a"
              style="width: 100%;margin-left:50%"
            >
              <img src="../../assets/t05.png" style="width:40% !important;">
              <div style="display: block !important; text-align: center !important;">
                <p
                  style="color: rgb(85, 85, 85);line-height: 2rem;font-size: 2rem;margin-bottom: 0px;font-weight:bold"
                >{{item.goodsName}} ￥{{item.goodsValue}}</p>
                <p
                  style="line-height: 2rem; color: rgb(153, 153, 153);margin-bottom: 0px;"
                >推荐服务 {{item.goodsPram1}}次</p>
                <p
                  style="line-height: 2rem; color: rgb(153, 153, 153);margin-bottom: 0px;"
                >预测服务{{item.goodsPram2}}次</p>
              </div>
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
        <!-- <el-col :span="18">
                 <el-checkbox-group v-model="userChoose">
                 <el-checkbox v-for="item in proQueryGoods" :label="item" :key="item.goodsId" class="a">
                  <img src="../../assets/t06.png">
                 <div>
                       <p style="color: rgb(85, 85, 85);line-height: 2em;font-size: 24px;margin-bottom: 0px;font-weight:bold">{{item.goodsName}} ￥{{item.goodsValue}}</p>
                       <p v-if="item.goodsPram1 > 0" style="line-height: 2em; color: rgb(153, 153, 153);margin-bottom: 0px;">推荐服务{{item.goodsPram1}}次</p>
                       <p v-if="item.goodsPram2 > 0" style="line-height: 2em; color: rgb(153, 153, 153);margin-bottom: 0px;">预测服务{{item.goodsPram2}}次</p>
                 </div>
               </el-checkbox>
              </el-checkbox-group>
        </el-col>-->
      </el-row>
      <el-row style="text-align:center;">
        <!-- <el-col :span="18" style="margin-left:5.5%">
            <el-checkbox-group v-model="userChoose">
            <el-checkbox  v-for="item in proChoiceGoods" :label="item" :key="item.goodsId"  class="a" style="width:17%">   
                <div style="margin-left:0">
                
                   <img src="../../assets/t07.png">
                
                 <div>
                   <p style="color: rgb(85, 85, 85);line-height: 2em;font-size: 24px;margin-bottom: 0px;font-weight:bold">{{item.goodsName}} ￥{{item.goodsValue}}</p>
                   <p v-if="item.goodsPram1 > 0" style="line-height: 2em; color: rgb(153, 153, 153);margin-bottom: 0px;">推荐服务{{item.goodsPram1}}次</p>
                   <p v-if="item.goodsPram2 > 0" style="line-height: 2em; color: rgb(153, 153, 153);margin-bottom: 0px;">预测服务{{item.goodsPram2}}次</p>
                </div>
              </div>
            </el-checkbox>
          </el-checkbox-group>
        </el-col>-->

        <!-- <div class="a" style="width:75%;"> 
                     <span v-if="userChoose.length<=0" style="font-size:24px;">您还未选择任何商品.</span>
                     <span v-if="userChoose.length>0 && payPre>=1">￥ {{payCount}}</span>
        <div v-if="userChoose.length>0 && payPre<1">-->
        <!-- <span style="color:red">￥ {{payment}}</span> &nbsp; -->
        <!-- <span style="font-size:24px;margin:2vh"> 总计:￥{{payCount}}</span>
                     </div>
                      <img src="../../assets/zf2.jpg" alt="" style="margin:5vh 0">
                      <img src="../../assets/zf1.jpg" alt="">
        </div>-->
        <el-button @click="aliPay">
          <img
            src="../../assets/zf2.jpg"
            alt
            width:175
            height:59
            style="margin:0 5%;margin-bottom: 12%"
          >
        </el-button>

        <el-button @click="wxPay">
          <img src="../../assets/zf1.jpg" alt style="margin:0 5%;margin-bottom: 12%">
        </el-button>
      </el-row>
      <!-- <el-button class="hh" @click="fnShowHisTable" style="text-align:center;margin:2vh 20%">返回支付记录</el-button> -->
      <!-- <el-row style="margin:5vh">
        <el-col :span="4" :offset="3" style="text-align:center;font-weight: bold;">基础套餐</el-col>
        <el-col :span="17">
          <el-checkbox-group v-model="userChoose">
            <el-checkbox border v-for="item in baseGoods" :label="item" :key="item.goodsId" @change="fnSelected(item)">
              <span style="font-weight: bold;
    color: black;">{{item.goodsName}} ￥{{item.goodsValue}}</span> <br>
              <span style="color:#999">推荐服务 {{item.goodsPram1}}次 预测服务{{item.goodsPram2}}次 </span>
            </el-checkbox>
          </el-checkbox-group>

        </el-col>
      </el-row>
      <el-row style="margin:5vh">
        <el-col :span="4" :offset="3" style="text-align:center;font-weight: bold;">推荐服务</el-col>
        <el-col :span="17">
          <el-checkbox-group v-model="userChoose">
            <el-checkbox border v-for="item in proQueryGoods" :label="item" :key="item.goodsId">
              <span style="font-weight: bold;
    color: black;">{{item.goodsName}} ￥{{item.goodsValue}}</span> <br>
              <span style="margin-bottom: 0;color:#999"><span v-if="item.goodsPram1 > 0">推荐服务
                  {{item.goodsPram1}}次</span>
                <span v-if="item.goodsPram2 > 0">预测服务{{item.goodsPram2}}次</span></span>
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <el-row style="margin-bottom:10vh;margin-left:3vh">
        <el-col :span="4" :offset="3" style="text-align:center;font-weight: bold;">预测服务</el-col>
        <el-col :span="17">
          <el-checkbox-group v-model="userChoose">
            <el-checkbox border v-for="item in proChoiceGoods" :label="item" :key="item.goodsId">

              <span style="font-weight: bold;
    color: black;">{{item.goodsName}} ￥{{item.goodsValue}}</span> <br>

              <span style="margin-bottom: 0;color:#999"><span v-if="item.goodsPram1 > 0">推荐服务
                  {{item.goodsPram1}}次</span>
                <span v-if="item.goodsPram2 > 0">预测服务{{item.goodsPram2}}次</span></span>
            </el-checkbox>
          </el-checkbox-group>
        </el-col>
      </el-row>-->
      <!-- <el-row style="margin:5vh" v-if="payPre<1">
        <el-col :span="4" :offset="3" style="text-align:center;font-weight: bold;">
          优惠
        </el-col>
        <el-col :span="5">
          <div>
            <el-tag type="danger">全场 {{payPre|formatDiscount}}折</el-tag>
          </div>

        </el-col>
      </el-row>-->
      <!-- <el-row style="margin:5vh">
        <el-col :span="4" :offset="3" style="text-align:center;font-weight: bold;">
          *总计
        </el-col>
        <el-col :span="5">
          <span v-if="userChoose.length<=0">您还未选择任何商品.</span>
          <span v-if="userChoose.length>0 && payPre>=1">￥ {{payCount}}</span>
      <div v-if="userChoose.length>0 && payPre<1">-->
      <!-- <span style="color:red">￥ {{payment}}</span> &nbsp; -->
      <!-- <span> ￥{{payCount}}</span>
          </div>
        </el-col>
      </el-row>

      <el-row style="margin-bottom:10vh;margin-left:14vh">
        <el-col :span="5" :offset="6">
          <img src="../../assets/zf2.jpg" alt="">
        </el-col>
        <el-col :span="5">
          <img src="../../assets/zf1.jpg" alt="">
        </el-col>
      </el-row>-->
    </div>
    <!-- 
    <el-row v-show="showTable">
      <el-col :span="24" style="text-align:center">
        <el-form :inline="true" :model="fromLineCondition" style="margin-top:5px;margin-left:28%">
          <el-form-item >
            <el-select placeholder="支付方式" v-model="fromLineCondition.type">
              <el-option label="支付宝支付" value="1"></el-option>
              <el-option label="微信支付" value="2"></el-option>
              <el-option label="赠送" value="3"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
            <el-select placeholder="付款状态" v-model="fromLineCondition.status">
              <el-option label="支付成功" value="1"></el-option>
              <el-option label="支付失败" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button class="hh"  @click="fnpPymentSubmit" icon="el-icon-search">
              查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="24" style="height: 55vh;overflow-y: auto;text-align:center">
        <el-table :data="paymentHistoryList"  style="width: 60%;margin:0 20%">
          <el-table-column type="index" width="80">
          </el-table-column>
          <el-table-column label="付款时间" width="200">
            <template slot-scope="scope">
              {{scope.row.payTime| formatDate}}
            </template>
          </el-table-column>
          <el-table-column prop="receiptAmount" label="付款金额" width="150">
          </el-table-column>
          <el-table-column label="支付方式" width="170">
            <template slot-scope="scope">
              {{(scope.row.payType === '1' || scope.row.payType === '6') ? '支付宝支付' :
                        (scope.row.payType === '2'|| scope.row.payType === '4'|| scope.row.payType === '5') ? '微信支付' :
                        scope.row.payType === '3' ? '赠送' : ''
                        }}
            </template>
          </el-table-column>
          <el-table-column prop="zf" label="状态" width="170">
            <template slot-scope="scope">
              {{scope.row.tradeState === '3' ? '支付成功' : '支付失败'}}
            </template>
          </el-table-column>
          <el-table-column prop="outTradeNo" label="付款编号" width="250">
          </el-table-column>
          <el-table-column prop="goodsName" label="商品名称" width="100">
          </el-table-column>
        </el-table>

      </el-col>

      <el-col :span="24" style="margin-bottom:10%;text-align:center;">
        <el-pagination v-if="paymentTotaCount!=''" @current-change="paymentPageChanged"
          :current-page.sync="paymentCurrentPage" :page-size="paymentListNum" layout="total, prev, pager, next"
          :total="paymentTotaCount">
        </el-pagination>
      </el-col>
    </el-row>-->

    <!-- 免责声明 -->
    <el-dialog title="免责声明" :visible.sync="mianzeVisible" width="50%" center>
      <div>
        <p style="font-weight: bold">
          1、本系统无法向体育类、艺术类、及三校高职类考生提供辅助推荐，而且为考生生成的推荐中不包含军校、警校、国防生、免费师范等本专科提前批次计划，以及定向就业、人民警察子女计划、新疆军区子女计划、边防军人计划、高水平运动员、华侨等特殊招生计划
          <span>，强烈建议以上考生不要支付；</span>
        </p>
        <p>2、“新疆高考志愿辅助填报系统”根据往年高校录取情况，结合当年高考录取政策、考生考试情况，为考生推荐各批次志愿学校和专业，供考生和家长参考。考生在正式进行网上志愿填报时，应向相关高校进一步咨询确认，以完善志愿表；</p>
        <p>3、由于各高校每年的招生计划、招生专业都会进行一定程度的调整，因此“新疆高考志愿辅助填报系统”提供的院校招生专业数据可能会有变动，考生在填报志愿时，请以高校最新发布的招生计划信息为准，并咨询具体学校；</p>
        <p>4、由于考生去向的不确定性，高考志愿填报将具有一定的风险，“新疆高考志愿辅助填报系统”根据往年高校录取情况，结合当年高考录取政策、考生考试情况，为考生提供相关建议，仅供填报志愿时参考，考生在具体填报志愿时，应根据自身情况填写，更多问题请向相关高校进一步咨询。因为高考招生录取的特殊性，本系统不对录取结果提供担保。</p>
      </div>
      <div>
        <el-checkbox v-model="checked">我同意该声明</el-checkbox>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="mianzeVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmMianze" :disabled="confirm">确定并进入支付页面</el-button>
      </span>
    </el-dialog>

    <!-- 密码验证 -->
    <el-dialog title="密码验证" :visible.sync="passVisible" width="50%" center>
      <div>
        <el-input v-model="reconfirmPassword" type="password"></el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="passVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmPass()">确定并进入支付页面</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from "@/utils/api";
import { formatDate } from "@/utils/filter/timeFilter";
import { subAgentList } from "@/constants/constants";
export default {
  data() {
    return {
      reconfirmPassword: "",
      passVisible: false,
      confirm: true,
      checked: false,
      mianzeVisible: false,
      fromLineCondition: {
        type: "",
        status: ""
      },
      paymentHistoryList: [],
      paymentTotaCount: "",
      paymentCurrentPage: 1,
      paymentListNum: 10,
      //基础包
      baseGoods: [],
      //体验商品
      demoGoods: [],
      //测试商品
      ceshiGoods: [],
      //查询商品
      proQueryGoods: [],
      //推荐商品
      proChoiceGoods: [],
      showTable: true,
      //用户是否已经购买过体验包,1已购买，0未购买
      demoPay: "0",
      //用户当亲享受的折扣
      payPre: 0.85,
      //当前时段，用来区分是体验还是正式demo/pro
      currTime: "demo",
      //用户已选商品
      userChoose: [],
      //总金额
      payCount: 0.01,
      //实际支付金额
      payment: 0,
      //总查询次数
      goodsPram1: 0,
      //总推荐次数
      goodsPram2: 0,
      payModel: "",
      payPre: 1.0
    };
  },
  methods: {
    gohome() {
      this.$router.push("/");
    },
    aliPay() {
      if (this.userChoose.length <= 0) {
        this.$message({
          message: "请选择要购买的商品",
          type: "warning"
        });
      } else {
        this.mianzeVisible = true;
        this.payModel = 1;
      }
    },
    wxPay() {
      if (this.userChoose.length <= 0) {
        this.$message({
          message: "请选择要购买的商品",
          type: "warning"
        });
      } else {
        this.mianzeVisible = true;
        this.payModel = 0;
      }
    },
    confirmPass() {
      api({
        url: "/nceeSysMgr/rest/LoginUtil/login",
        method: "post",
        data: {
          username: JSON.parse(localStorage.getItem("user")).userId,
          password: this.reconfirmPassword
        }
      }).then(res => {
        console.log(res, '  reconfirm ')
        if (res.data.state === "success") {
          const param = {
            payCount: 0.01 + "",
            goodsPram1: Number(this.goodsPram1),
            goodsPram2: Number(this.goodsPram2),
            payModel: this.payModel,
            payPre: this.payPre.toFixed(2),
            goods: JSON.stringify(this.userChoose)
          };
          api({
            url: "/nceeSysMgr/rest/data/pay",
            method: "post",
            data: param
          }).then(payres => {
            console.log(payres, ' payment res');
            if (payres.status === 200) {
              const code = payres.data.substring(0, 4);
              if (this.payModel === 1) {
                if (code === "0000") {
                  document.write(payres.data.substring(4, payres.data.length));
                  console.log(res, " ali pay res");
                } else if (code === "0001") {
                  alert("服务器获取参数失败，请联系管理员！");
                } else if (code === "0002") {
                  alert("json解析异常，请联系管理员！");
                } else if (code === "0003") {
                  alert("支付失败，请刷新后重试！");
                }
              } else {
                if (code === "0000") {
                  this.$router.push({
                    name: "wxpay",
                    params: {
                      outTradeNo: payres.data.substring(4, payres.data.length)
                    }
                  });
                } else if (code === "0001") {
                  alert("服务器获取参数失败，请联系管理员！");
                } else if (code === "0002") {
                  alert("json解析异常，请联系管理员！");
                } else if (code === "0003") {
                  alert("支付失败，请刷新后重试！");
                }
              }
            } 
          });
        } else {
          this.$message({
            message: '密码错误，请重新输入！',
            type: 'warning'
          })
          this.reconfirmPassword = ''
        }
      });
    },
    confirmMianze() {
      if (subAgentList.indexOf(localStorage.getItem("agentName")) < 0) {
        const param = {
          payCount: 0.01 + "",
          goodsPram1: Number(this.goodsPram1),
          goodsPram2: Number(this.goodsPram2),
          payModel: this.payModel,
          payPre: this.payPre.toFixed(2),
          goods: JSON.stringify(this.userChoose)
        };
        api({
          url: "/nceeSysMgr/rest/data/pay",
          method: "post",
          data: param
        }).then(res => {
          console.log(res);
          if (res.status === 200) {
            const code = res.data.substring(0, 4);
            if (this.payModel === 1) {
              if (code === "0000") {
                document.write(res.data.substring(4, res.data.length));
                console.log(res, " ali pay res");
              } else if (code === "0001") {
                alert("服务器获取参数失败，请联系管理员！");
              } else if (code === "0002") {
                alert("json解析异常，请联系管理员！");
              } else if (code === "0003") {
                alert("支付失败，请刷新后重试！");
              }
            } else {
              if (code === "0000") {
                this.$router.push({
                  name: "wxpay",
                  params: { outTradeNo: res.data.substring(4, res.data.length) }
                });
              } else if (code === "0001") {
                alert("服务器获取参数失败，请联系管理员！");
              } else if (code === "0002") {
                alert("json解析异常，请联系管理员！");
              } else if (code === "0003") {
                alert("支付失败，请刷新后重试！");
              }
            }
          }
        });
      } else {
        this.passVisible = true;
      }
      // const param = {
      //   payCount: 0.01 + '',
      //   goodsPram1: Number(this.goodsPram1),
      //   goodsPram2: Number(this.goodsPram2),
      //   payModel: this.payModel,
      //   payPre: this.payPre.toFixed(2),
      //   goods: JSON.stringify(this.userChoose)
      // }
      // api({
      //   url: '/nceeSysMgr/rest/data/pay',
      //   method: 'post',
      //   data: param
      // })
      // .then(res => {
      //   console.log(res)
      //   if (res.status === 200) {
      //     const code = res.data.substring(0, 4)
      //     if (this.payModel === 1) {
      //       if (code === '0000') {
      //         document.write(res.data.substring(4, res.data.length))
      //         console.log(res, ' ali pay res')
      //       } else if (code === '0001') {
      //         alert("服务器获取参数失败，请联系管理员！")
      //       }
      //       else if (code === '0002') {
      //           alert("json解析异常，请联系管理员！")
      //       }
      //       else if (code === '0003') {
      //           alert("支付失败，请刷新后重试！")
      //       }
      //     } else {
      //       if (code === '0000') {
      //         this.$router.push({name: 'wxpay', params: {outTradeNo: res.data.substring(4, res.data.length)}})
      //       } else if (code === '0001') {
      //         alert("服务器获取参数失败，请联系管理员！")
      //       } else if (code === '0002') {
      //         alert("json解析异常，请联系管理员！")
      //       } else if (code === '0003') {
      //         alert("支付失败，请刷新后重试！")
      //       }
      //     }

      //   }
      // })
    },
    fnSearch(startNum, listNum) {
      var searchConditionArray = new Array();
      searchConditionArray.push({
        constraint: "EQUALS",
        fieldName: "payUserId",
        fieldValue: "13565869085",
        inputType: "input"
      });
      if (
        this.fromLineCondition.type !== "" &&
        this.fromLineCondition.type !== "undefined"
      ) {
        var item = {};
        item.fieldName = "payType";
        item.inputType = "checkbox";
        item.constraint = "IN";
        item.fieldValue = new Array();

        // 1 支付宝 2 微信支付 3赠送 4微信公众号支付 5微信H5支付 6支付宝h5支付
        if (this.fromLineCondition.type == "1") {
          item.fieldValue = ["1", "6"];
        } else if (this.fromLineCondition.type == "2") {
          item.fieldValue = ["2", "4", "5"];
        } else if (this.fromLineCondition.type == "3") {
          item.fieldValue = ["3"];
        }
        searchConditionArray.push(item);
      }
      if (
        this.fromLineCondition.status !== "" &&
        this.fromLineCondition.status !== "undefined"
      ) {
        if (this.fromLineCondition.status == "1") {
          searchConditionArray.push({
            constraint: "EQUALS",
            fieldName: "tradeState",
            fieldValue: "3",
            inputType: "input"
          });
        } else {
          searchConditionArray.push({
            constraint: "NOT_EQUAL",
            fieldName: "tradeState",
            fieldValue: "3",
            inputType: "input"
          });
        }
      }

      const params =
        "searchCond=" +
        JSON.stringify(searchConditionArray) +
        "&orderCond=-payTime&start=" +
        (1 + listNum * (startNum - 1)) +
        "&num=" +
        listNum;
      api({
        url: "nceeSysMgr/rest/data/searchByCondAndOrderBy/GoodsPayView",
        method: "post",
        data: params
      })
        .then(res => {
          if (res.status == 200) {
            this.paymentHistoryList = res.data;
          }
        })
        .catch(e => {
          console.error(e);
        });
      //获取当前条件下的所有数据的总数
      api({
        url: "/nceeSysMgr/rest/data/searchCountByCond/GoodsPayView",
        method: "post",
        data: params
      })
        .then(res => {
          if (res.status == 200) {
            this.paymentTotaCount = res.data.count;
          }
        })
        .catch(e => {
          console.error(e);
        });
    },
    // 分页方法
    paymentPageChanged() {
      console.log(123);

      this.fnSearch(this.paymentCurrentPage, this.paymentListNum);
    },
    // 查询按钮
    fnpPymentSubmit() {
      this.paymentCurrentPage = 1;
      this.fnSearch(this.paymentCurrentPage, this.paymentListNum);
    },
    // 展示商品列表
    showGoods() {
      this.showTable = false;
    },
    fnShowHisTable() {
      this.showTable = true;
    },
    //获取套餐信息列表
    getGoods() {
      api({
        url: "/nceeSysMgr/rest/data/getGoodList",
        method: "post",
        data: {}
      })
        .then(res => {
          if (res.status == 200) {
            if (res.data.goods.length > 0) {
              var goods = res.data.goods;
              for (var i = 0; i < goods.length; i++) {
                if (goods[i].goodsPram3 === "1") {
                  this.baseGoods.push(goods[i]);
                } else if (goods[i].goodsPram3 === "2") {
                  this.proQueryGoods.push(goods[i]);
                } else if (goods[i].goodsPram3 === "3") {
                  this.proChoiceGoods.push(goods[i]);
                } else if (goods[i].goodsPram3 === "4") {
                  this.demoGoods.push(goods[i]);
                } else if (goods[i].goodsPram3 === "6") {
                  this.ceshiGoods.push(goods[i]);
                }
                goods[0].num = 1;
              }
              console.log(goods, "goods");
              this.demoPay = res.data.demoPay;
              this.basePay = res.data.basePay;
              this.currTime = res.data.currTime;
            }
          }
        })
        .catch(e => {
          console.error(e);
        });
    },
    fnSelected(item) {
      this.goodsPram1 = item.goodsPram1;
      this.goodsPram2 = item.goodsPram2;
    },
    changeTwoDecimal(p) {
      var f_x = parseFloat(p);
      if (isNaN(f_x)) {
        return "0.00";
      }
      var f_x = Math.round(f_x * 100) / 100;
      var s_x = f_x.toFixed(2);
      return s_x;
    }
  },
  mounted() {
    this.fnSearch(1, 10);
    this.getGoods();
    var point = 0.212;
  },
  filters: {
    formatDate(time) {
      const date = new Date(time);
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
    formatDiscount(val) {
      var str = Number(val * 100).toFixed(1);

      return Math.round(str);
    }
  },
  watch: {
    userChoose: function(val) {
      this.payCount = 0;
      for (let i = 0; i < val.length; i++) {
        const element = val[i];
        console.log(element.goodsValue);
        this.payCount += element.goodsValue * 1;
      }
      this.payCount = this.changeTwoDecimal(this.payCount);
      // this.payment = this.changeTwoDecimal( this.payCount * this.payPre)
    },
    checked: function(val) {
      this.confirm = val ? false : true;
    }
  }
};
</script>
<style>
.gdap-payment {
  position: absoult;
  /* background-image: url("../../assets/1920_937/bg.jpg"); */
  background-color: #f8f8f8;
}

.el-checkbox.is-bordered {
  height: auto !important;
  border: 1px solid #fefeff;
}

.el-checkbox__input {
  vertical-align: top !important;
}

.el-checkbox {
  background-color: #f0f4f3;
}
.div_SSMneS {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  flex: 1 1 0%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.a {
  width: 100% !important;
  height: 250px;
  padding: 40px 110px 40px 40px;
  background-color: #fff;
  border-radius: 10px;
}

.hh {
  background: #fff;
  border-radius: 0;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  cursor: pointer;
  min-width: 160px;
  color: rgb(85, 85, 85);
  line-height: 2em;
  font-size: 24px;
  margin-bottom: 0px;
  font-weight: bold;
  -webkit-transform: rotate(0deg) scale(1) translate(0px, 0px);
  -ms-transform: rotate(0deg) scale(1) translate(0px, 0px);
  transform: rotate(0deg) scale(1) translate(0px, 0px);
  transition: all 0.3s ease 0s;
  margin-top: 2px;
}
.el-pager li,
.el-pagination button,
.el-pagination span:not([class*="suffix"]) {
  font-size: 18px !important;
}
.b {
  font-size: 5em;
  font-family: Oswald;
  text-transform: uppercase;
  line-height: 1em;
  margin-bottom: 0px;
  position: absolute;
  z-index: 0;
  opacity: 0.2;
  font-weight: bold;
  color: rgb(204, 204, 204);
}
</style>